<template>
  <a-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :switchFullscreen="switchFullscreen"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
      <a-button v-if="record.openType === 'url'" type="primary" @click="toHandle">去处理</a-button>
    </template>
    <a-card class="daily-article" :loading="loading">
      <a-card-meta :title="record.titile" :description="'发布人：' + record.sender + ' 发布时间： ' + record.sendTime"> </a-card-meta>
      <a-divider />
      <span v-html="record.msgContent" class="article-content"></span>
    </a-card>
  </a-modal>
</template>

<script>
export default {
  name: 'SysAnnouncementModal',
  components: {},
  data() {
    return {
      title: '通知消息',
      record: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      switchFullscreen: true,
      loading: false,
      bodyStyle: {
        padding: '0',
        height: window.innerHeight * 0.8 + 'px',
        'overflow-y': 'auto',
      },
      modelStyle: {
        width: '60%',
        style: { top: '20px' },
        fullScreen: false,
      },
    };
  },
  created() {},
  methods: {
    detail(record) {
      this.visible = true;
      this.record = record;
    },
    handleCancel() {
      this.visible = false;
    },
    /** 切换全屏显示 */
    handleClickToggleFullScreen() {
      let mode = !this.modelStyle.fullScreen;
      if (mode) {
        this.modelStyle.width = '100%';
        this.modelStyle.style.top = '20px';
      } else {
        this.modelStyle.width = '60%';
        this.modelStyle.style.top = '50px';
      }
      this.modelStyle.fullScreen = mode;
    },
    toHandle() {
      if (this.record.openType === 'url') {
        this.visible = false;
        //链接跳转
        this.$router.push({ path: this.record.openPage });
      }
    },
  },
};
</script>

<style lang="less">
.announcementCustomModal {
  .ant-modal-header {
    border: none;
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 56px;
    padding: 0;
    .ant-modal-title {
      .custom-btn {
        width: 56px;
        height: 56px;
        border: none;
        box-shadow: none;
      }
    }
  }
  .daily-article {
    border-bottom: 0;
  }
}
</style>
<style scoped lang="less">
.daily-article {
  .article-button {
    font-size: 1.2rem !important;
  }
  .ant-card-body {
    padding: 18px !important;
  }
  .ant-card-head {
    padding: 0 1rem;
  }
  .ant-card-meta {
    margin-bottom: 1rem;
  }
  .article-content {
    p {
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: initial;
      white-space: normal;
      font-size: 0.9rem !important;
      margin-bottom: 0.8rem;
    }
  }
}
</style>
